<template>
  <el-input
    clearable
    :placeholder="'请输入' + searchOption[selectIndex].label"
    v-bind="$attrs"
    @clear="search"
    @keydown.enter="search"
  >
    <template #prepend>
      <el-select
        v-model="selectIndex"
        class="prepend-select"
        placeholder="请选择"
        @change="selectchange"
      >
        <el-option
          v-for="(item , index) in searchOption"
          :key="index"
          :label="item.label"
          :value="index"
        />
      </el-select>
    </template>
    <template #append>
      <el-button
        type="primary"
        icon="Search"
        @click="search"
      >
        搜索
      </el-button>
    </template>
  </el-input>
</template>

<script setup>
import { ref, defineProps, defineModel, defineEmits } from 'vue'
const props = defineProps({
  searchOption: {
    type: Array,
    default: () => []
  }
})
const selectValue = defineModel('selectValue', {
  type: String,
  default: ''
})
const emit = defineEmits(['search'])

const selectIndex = ref(0)
const selectchange = (e) => {
  // 向父组件传递输入的值
  selectValue.value = props.searchOption[e].value
}
const search = () => emit('search')
</script>

<style lang="less" scoped>
.row{
  padding: 20px 0px !important;
  margin: 0 !important;
}

.prepend-select{
  width: 130px;
}
// 内嵌下拉框背景颜色
::v-deep(.el-input-group__prepend) {
  background-color: #fff;
}
// 内嵌搜索按钮配色
::v-deep(.el-input-group__append) {
  background-color: #409EFF;
  color: #FFF;
}
</style>
